<template>
   <div id="DrawerBack" class="flex" @click="showdown">
    <transition name="toleft">
       <div id="DrawerContent" v-if="ContentState">
            <PersonalDetail v-if="DrawerState==1" class="box" :showdown="showdown"/>
       </div>
    </transition>
   </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
import PersonalDetail from './PersonalDetail/PersonalDetail.vue';
  export default 
  {
  components: { PersonalDetail },
     name :'', 
     data() {
      return {
        ContentState:false
      }
     },
     computed:{
       ...mapState('Chat',['DrawerState'])
     },
     mounted() {
        setTimeout(() => {
          this.ContentState=true
        }, 10);
     },
     methods:{
      ...mapMutations('Chat',['SETDRAWER']),
   
      showdown(){
         this.ContentState=false
        setTimeout(() => {
           this.SETDRAWER([0,null])
        }, 300);
      }
     }
  }
</script>
<style scoped lang='less'>
#DrawerBack{
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: flex-end;
    overflow: hidden;
}
.toleft-enter-active{
    animation: toleft 0.2s linear;
}
.toleft-leave-active{
    animation: toleft 0.2s reverse;
}
@keyframes toleft{
   from{
     transform: translateX(300px);
   }
   to{
     transform: translateX(0px);
   }
}
#DrawerContent{
    width: 300px;
    height: 100%;
    overflow: auto;
    background: var(--GeneralBackColor-half);
    color: white;
}
.box{
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>